<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>树形组件</title>
    
	<meta name="renderer" content="webkit">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
		<!-- 公共样式 结束 -->
  </head>
  <body>
		
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
		  <legend>部门级别</legend>
		</fieldset>
		 
		<div id="test2" class="demo-tree"></div>
		
  <script src="layui/layui.js"></script>
<script>
layui.use(['tree', 'util'], function(){
  var tree = layui.tree
  ,layer = layui.layer
  ,util = layui.util
  
  //模拟数据
  ,data = [{}]
  
  //模拟数据1
  ,data1 = [{
    title: '主管部门'
    ,id: 1
    ,children: [{
      title: '1区'
      ,id: 1000
      ,children: [{
        title: '主管'
        ,id: 10001
      },{
        title: '员工'
        ,id: 10002
      }]
    },{
      title: '2区'
      ,id: 1001
    },{
      title: '3区'
      ,id: 1002
    }]
  },{
    title: '后勤部门'
    ,id: 2
    ,children: [{
      title: '员工'
      ,id: 2000
    },{
      title: '工人'
      ,id: 2001
    }]
  },{
    title: '稽查部门'
    ,id: 3
    ,children: [{
      title: '稽核员1'
      ,id: 3000
    },{
      title: '稽核员2'
      ,id: 3001
    }]
  }]
  
  //模拟数据2
  ,data2 = [{}];
 
  //基本演示
  tree.render({
    elem: '#test12'
    ,data: data
    ,showCheckbox: true  //是否显示复选框
    ,id: 'demoId1'
    ,isJump: true //是否允许点击节点时弹出新窗口跳转
    ,click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
    }
  });
  
  //仅节点左侧图标控制收缩
  tree.render({
    elem: '#test2'
    ,data: data1
    ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
    ,click: function(obj){
      layer.msg(JSON.stringify(obj.data));
    }
  });
 
  //点击节点新窗口跳转
  tree.render({
    elem: '#test5'
    ,data: data
    ,isJump: true  //link 为参数匹配
  });
 
  //开启节点操作图标
  tree.render({
    elem: '#test9'
    ,data: data1
    ,edit: ['add', 'update', 'del'] //操作节点的图标
    ,click: function(obj){
      layer.msg(JSON.stringify(obj.data));
    }
  });
});
</script>
	</body>
</html>
